<script setup>
import {
    Edit,Delete,Position,Upload,Check
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    addpathservice, getallbookservice,getpartpathservice,
    updatepathservice, detailbookservice, deletepathservice, lendbookservice, getallbookcategoryservice
} from '@/api/book.js'
import {getpartusertaskservice,addf1service,addf2service,addf3service,addf4service,finaltask} from '@/api/allApi.js'
import {useUserInfoStore} from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();

//控制添加分类弹窗
const dialogVisible = ref(false)
const f1 =ref(false)
const f2 =ref(false)
const f3 =ref(false)
const f4 =ref(false)
//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20)//总条数
//const pageSize = ref(3)//每页条数
//文章分类数据模型
const categorys = ref([
])
//用户搜索时选中的分类id
const categoryId = ref('')
const bookcategorylist = async () => {
    let result = await getallbookcategoryservice();
    categorys.value = result.data;
}
bookcategorylist();
//用户搜索时选中的发布状态
const state = ref('')
//定义变量，控制标题
const title = ref('')
const lendtitle = ref('借阅图书信息填写')
//交通路线列表数据模型
const tasks = ref([
    {
        taskName:'日常检查',
        taskType:'日常巡检'
    },
    {
        taskName:'路面行驶质量检查',
        taskType:'定期检查'
    },
    {
        taskName:'路面损坏状况检查',
        taskType:'定期检查'
    }
])

const f1liqingalldamage = ['线裂','网裂','龟裂','拥包','车辙','沉陷','翻浆','剥落','坑槽','啃边','路框差','唧浆','泛油']
const f1shuinialldamage = ['线裂','板角断裂','边角裂缝','交叉裂缝和破碎板','接缝料损坏','边角剥落','坑洞','表面纹裂','层状剥落','错台','拱胀','唧浆','路框差','沉陷']
const f1alldamage =ref([])



//与后端交互的json数据
const pathmodel = ref({
    startPoint: '', //起点
    endPoint: '', //终点
    number: '', //班次
    startTime: null, //出发时间
    endTime: null, //到达时间
    price: '', //费用
    way:'' //交通方式
})
const taskmodel = ref({
    recordId:null,
    damageType:null,
    damageDescribe:null,
    comment:null,
    damagePart:null,
    damageReason:null,

    facilityName:null,
    suggest:null,
    iri:null,
    allLongth:null,
    allWidth:null,
    damageLongth:null,
    damageWidth:null,
    damageHighth:null,
    damageArea:null,

    end:null
})
const findmodel = ref({
    pageNum: 1,
    pageSize: 20,
    str: '',
    id:null
})


const tasklist = async () => {
    console.log(findmodel.value);
    findmodel.value.id = userInfoStore.userinfo.id;
    let result = await getpartusertaskservice(findmodel.value);
    console.log(result);
    total.value = result.data.total;
    tasks.value = result.data.items;
}
tasklist();
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    findmodel.value.pageSize = size;
    tasklist();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    findmodel.value.pageNum = num;
    tasklist();
}
const cleardata = () => {
    findmodel.value.startPoint = '',
    findmodel.value.endPoint = '',
    findmodel.value.str = ''
}
//表单校验
const rules = {
    damageType: [
        { required: true, trigger: 'blur' },
    ],
    damageDescribe: [
        { required: true, trigger: 'blur' },
    ],
    comment: [
        { required: true, trigger: 'blur' },
    ],
    damagePart: [
        { required: true, trigger: 'blur' },
    ],
    damageReason: [
        { required: true, trigger: 'blur' },
    ],
    facilityName: [
        { required: true, trigger: 'blur' },
    ],
    suggest: [
        { required: true, trigger: 'blur' },
    ],
    iri: [
        { required: true, trigger: 'blur' },
    ],
    allLongth: [
        { required: true, trigger: 'blur' },
    ],
    allWidth: [
        { required: true, trigger: 'blur' },
    ],
    damageLongth: [
        { required: true, trigger: 'blur' },
    ],
    damageWidth: [
        { required: true, trigger: 'blur' },
    ],
    damageHighth: [
        { required: true, trigger: 'blur' },
    ],
    damageArea: [
        { required: true, trigger: 'blur' },
    ],
}
const addf1 = async () => {
    let result = await addf1service(taskmodel.value);
    if (result.code === 0) {
        ElMessage.success("添加记录成功")
        f1.value = false;
        tasklist();
    }
    else {
        ElMessage.error(result.message ? result.message : '提交失败')
    }
}

const addf2 = async () => {
    console.log(taskmodel.value);
    let result = await addf2service(taskmodel.value);
    console.log(result.data);
    if (result.code === 0) {
        ElMessage.success("添加记录成功")
        f2.value = false;
        tasklist();
    }
    else {
        ElMessage.error(result.message ? result.message : '提交失败')
    }
}
const addf3 = async () => {
    console.log(taskmodel.value);
    let result = await addf3service(taskmodel.value);
    if (result.code === 0) {
        ElMessage.success("添加记录成功")
        f3.value = false;
        tasklist();
    }
    else {
        ElMessage.error(result.message ? result.message : '提交失败')
    }
}
const addf4 = async () => {
    console.log(taskmodel.value);
    let result = await addf4service(taskmodel.value);
    if (result.code === 0) {
        ElMessage.success("添加记录成功")
        f4.value = false;
        tasklist();
    }
    else {
        ElMessage.error(result.message ? result.message : '提交失败')
    }
}
//删除分类
const del = (row) => {
    ElMessageBox.confirm(
        '你确认已完成此任务吗？确认后不允许再次提交',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //用户点击了确认
            let result = await finaltask(row.id)
            if(result.code === 0 ){
                ElMessage.success('确认成功')
                tasklist();
            }
            //再次调用getAllCategory，获取所有文章分类
            else {
                ElMessage.error(result.message ? result.message : '确认失败')
            }
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消确认',
            })
        })
}
const elsesubmit = (row) =>{
    title.value = '设施损害通知单';
    f2.value=true
    taskmodel.value.recordId = 2
    //数据拷贝
    taskmodel.value.damageType = null
    taskmodel.value.damageDescribe = null
    taskmodel.value.comment = null
    taskmodel.value.damagePart = null
    taskmodel.value.damageReason = null
    taskmodel.value.facilityName = null
    taskmodel.value.suggest = null
    taskmodel.value.iri = null
    taskmodel.value.allLongth = null
    taskmodel.value.allWidth = null
    taskmodel.value.damageLongth = null
    taskmodel.value.damageWidth = null
    taskmodel.value.damageHighth = null
    taskmodel.value.damageArea = null

    //扩展i的属性，将来需要传递给后台，完成分类的修改
    taskmodel.value.id = row.id; //task的id
    console.log(row.id);
}
//展示编辑弹窗
const showDialog = (row) => {
    if(row.taskName === '日常检查') {
        title.value = '道路设施日常巡查情况记录表'
        f1.value=true
        taskmodel.value.recordId = 1
        if(row.pavementType === '水泥混凝土路面') {
            f1alldamage.value = f1shuinialldamage;
            
        }
        else{
            f1alldamage.value = f1liqingalldamage
        }
    }
    else if(row.taskName === '路面行驶质量检查') {
        title.value = '道路路面平整度检测记录表';
        f3.value=true
        taskmodel.value.recordId = 3
    }
    else if(row.taskName === '路面损坏状况检查') {
        title.value = '道路设施路面损害情况记录表';
        f4.value=true
        taskmodel.value.recordId = 4
        if(row.pavementType === '水泥混凝土路面') {
            f1alldamage.value = f1shuinialldamage;
            
        }
        else{
            f1alldamage.value = f1liqingalldamage
        }
    }
    //数据拷贝

    taskmodel.value.damageType = null
    taskmodel.value.damageDescribe = null
    taskmodel.value.comment = null
    taskmodel.value.damagePart = null
    taskmodel.value.damageReason = null
    taskmodel.value.facilityName = null
    taskmodel.value.suggest = null
    taskmodel.value.iri = null
    taskmodel.value.allLongth = null
    taskmodel.value.allWidth = null
    taskmodel.value.damageLongth = null
    taskmodel.value.damageWidth = null
    taskmodel.value.damageHighth = null
    taskmodel.value.damageArea = null

    //扩展i的属性，将来需要传递给后台，完成分类的修改
    taskmodel.value.id = row.id; //task的id
    console.log(row.id);
}

</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>日常巡检和定期检查任务提交</span>
                <!-- <div class="extra">
                    <el-button type="primary" @click="add">添加商品111</el-button>
                </div> -->
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="查询条件：">
                <el-input v-model="findmodel.str" placeholder="请输入查询内容" width="200"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="tasklist">搜索</el-button>
                <el-button @click="cleardata">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="tasks" style="width: 100%">
            <el-table-column label="任务类型" prop="taskType" width="80"></el-table-column>
            <el-table-column label="任务名称" prop="taskName" width="140"></el-table-column>
            <el-table-column label="用户名" prop="userName" ></el-table-column>
            <el-table-column label="用户类型" prop="userType" ></el-table-column>
            <el-table-column label="道路名称" prop="pathName" ></el-table-column>
            <el-table-column label="路面类型" prop="pavementType" ></el-table-column>
            <!-- <el-table-column label="起始地址" prop="startAddress" ></el-table-column>
            <el-table-column label="结束地址" prop="endAddress" > </el-table-column> -->
            <el-table-column label="巡检日期" prop="taskTime" width="180"> </el-table-column>
            <el-table-column label="状态" prop="status" > </el-table-column>
            <el-table-column label="提交记录表" width="150">
                <template #default="{ row }">
                    <el-button v-if="row.taskName === '日常检查'" :icon="Position" circle plain @click="elsesubmit(row)" :disabled="row.end === 1"></el-button>
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)" :disabled="row.end === 1"></el-button>
                    <el-button :icon="Check" circle plain type="danger" @click="del(row)" :disabled="row.end === 1"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="findmodel.pageNum" v-model:page-size="findmodel.pageSize"
            :page-sizes="[20, 30, 40, 50]" layout="jumper, total, sizes, prev, pager, next" background :total="total"
            @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
    <!-- 添加f1弹窗 -->
    <el-dialog v-model="f1" :title="title" width="40%">
        <el-form :inline="true" :model="taskmodel" :rules="rules" label-width="110px" style="padding-right: 30px">
            <el-form-item label="损坏类型" prop="damageType">
                <el-select placeholder="请选择损坏类型" v-model="taskmodel.damageType">
                    <el-option v-for="c in f1alldamage" :key="c" :label="c" :value="c">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="损坏位置及损坏情况描述" prop="damageDescribe">
                <el-input
                    v-model="taskmodel.damageDescribe"
                    style="width: 300px"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入损坏位置及损坏情况描述"
                />
            </el-form-item>
            <el-form-item label="备注" prop="comment">         
                <el-input
                    v-model="taskmodel.comment"
                    style="width: 300px"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入备注"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="f1 = false">取消</el-button>
                <el-button type="primary" @click="addf1"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加f2弹窗 -->
    <el-dialog v-model="f2" :title="title" width="40%">
        <el-form :inline="true" :model="taskmodel" :rules="rules" label-width="110px" style="padding-right: 30px">
            <el-form-item label="设施名称" prop="facilityName">
                <el-input placeholder="请输入设施名称" v-model="taskmodel.facilityName"></el-input>
            </el-form-item>
            <el-form-item label="损坏部位" prop="damagePart">
                <el-input placeholder="请输入损坏部位"  v-model="taskmodel.damagePart"></el-input>
            </el-form-item>
            <el-form-item label="损坏原因" prop="damageReason">
                <el-input
                    v-model="taskmodel.damageReason"
                    style="width: 300px"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入损坏原因"
                />
            </el-form-item>
            <el-form-item label="处理意见" prop="suggest">         
                <el-input
                    v-model="taskmodel.suggest"
                    style="width: 300px"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入处理意见"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="f2 = false">取消</el-button>
                <el-button type="primary" @click="addf2"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加f3弹窗 -->
    <el-dialog v-model="f3" :title="title" width="40%">
        <el-form :inline="true" :model="taskmodel" :rules="rules" label-width="110px" style="padding-right: 30px">
            <el-form-item label="IRI(m/km)" prop="iri">
                <el-input placeholder="请输入IRI的值" v-model="taskmodel.iri"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="comment">
                <el-input
                    v-model="taskmodel.comment"
                    style="width: 300px"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入备注"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="f3 = false">取消</el-button>
                <el-button type="primary" @click="addf3"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加f4弹窗 -->
    <el-dialog v-model="f4" :title="title" width="40%">
        <el-form :inline="true" :model="taskmodel" :rules="rules" label-width="110px" style="padding-right: 30px">
            <el-form-item label="检查总长(m)" prop="allLongth">
                <el-input placeholder="请输入检查总长" v-model="taskmodel.allLongth"></el-input>
            </el-form-item>
            <el-form-item label="检查总宽(m)" prop="allWidth">
                <el-input placeholder="请输入检查总宽" v-model="taskmodel.allWidth"></el-input>
            </el-form-item>
            <el-form-item label="损坏类型" prop="damageType">
                <el-select placeholder="请选择损坏类型" v-model="taskmodel.damageType">
                    <el-option v-for="c in f1alldamage" :key="c" :label="c" :value="c">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="损坏长(m)" prop="damageLongth">
                <el-input placeholder="请输入损坏长" v-model="taskmodel.damageLongth"></el-input>
            </el-form-item>
            <el-form-item label="损坏宽(m)" prop="damageWidth">
                <el-input placeholder="请输入损坏宽" v-model="taskmodel.damageWidth"></el-input>
            </el-form-item>
            <el-form-item label="损坏高(m)" prop="damageHighth">
                <el-input placeholder="请输入损坏高" v-model="taskmodel.damageHighth"></el-input>
            </el-form-item>
            <el-form-item label="损坏位置及损坏情况描述" prop="damageDescribe">
                <el-input
                    v-model="taskmodel.damageDescribe"
                    style="width: 300px"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入损坏位置及损坏情况描述"
                />
            </el-form-item>
            <el-form-item label="备注" prop="comment">
                <el-input
                    v-model="taskmodel.comment"
                    style="width: 300px"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入备注"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="f4 = false">取消</el-button>
                <el-button type="primary" @click="addf4"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>